<template>
  <el-tabs type="card" @tab-change="onTabChange" @tab-remove="onTabRemove">
    <el-tab-pane v-for="item in tabs" :key="item.path" :name="item.path" :closable="item.closable">
      <template #label>
        <el-icon v-if="item.icon"> <component :is="Icons[item.icon]" /> </el-icon>
        <span class="ml-2">{{ item.title }}</span>
      </template>
      <!-- {{ item.content }} -->
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import type { TabPaneName } from 'element-plus'
import * as Icons from '@/assets/icons'
import { useRouter } from 'vue-router'

interface Props {
  tabs: BusinessTabItem[]
}

defineProps<Props>()

const router = useRouter()

const removeTab = inject<(path: string) => void>('remove-tab')

// defineProps({
//   tabs: {
//     type: Array as PropType<BusinessTabItem[]>,
//     required: true,
//     default: () => []
//   }
// })

// withDefaults(defineProps<Props>(), {
//   tabs: () => []
// })

const onTabChange = (path: TabPaneName) => {
  router.push(path as string)
}
const onTabRemove = (path: TabPaneName) => {
  // router.go(-1)
  removeTab?.(path as string)
}
</script>

<style scoped lang="scss">
.el-tabs {
  height: $sl-layout-tabs-height;
  user-select: none;
  //   :deep(.el-tabs__nav-wrap) {
  //     padding: 0 20px;
  //   }
  :deep(.el-tabs__header) {
    margin-bottom: 0;
    box-sizing: border-box;
  }

  :deep(.sortable-drag) {
    // 拖拽的时候样式
    background-color: white;
  }

  :deep(.el-tabs__nav-next),
  :deep(.el-tabs__nav-prev) {
    line-height: 40px;

    .el-icon {
      vertical-align: middle;
    }
  }
}

.el-tabs--card {
  & > :deep(.el-tabs__header) {
    .el-tabs__nav {
      border: none;
    }
    .el-tabs__item {
      border-bottom: none;
    }
    .el-tabs__item.is-active {
      border-bottom: 2px solid var(--el-color-primary);
    }
    .el-tabs__item:last-child {
      border-right: 1px solid var(--el-border-color-light);
    }
    // .is-icon-close {
    //   width: 14px !important;
    // }
    // .el-tabs__item.is-closable:hover {
    //   padding: 0 20px !important;
    // }
  }

  :deep(.el-tabs__nav-next) {
    // border-left: 1px solid var(--el-border-color-light);
    border-left: 1px dashed var(--el-border-color-light);
  }
  :deep(.el-tabs__nav-prev) {
    // border-right: 1px solid var(--el-border-color-light);
    border-right: 1px dashed var(--el-border-color-light);
  }
  //   :deep(.el-tabs__nav-scroll > :last-child) {
  //     border-left: 1px solid var(--el-border-color-light);
  //     border-right: 1px solid var(--el-border-color-light);
  //   }
}
</style>
